/**
 * Modal 组件的主题配置
 * 
 * 基于企业级设计规范 (Modal.json) 的完整配置
 * 包含所有对话框样式定义
 */

import type { ComponentToken } from 'antd/es/modal/style';

// ========== 设计 Token 常量 ==========

/**
 * 头部相关 Token
 */
const HEADER_TOKENS = {
  // 背景颜色
  bg: '#ffffff',
  
  // 标题
  title: {
    fontSize: 16,
    lineHeight: 1.5,
    color: '#1a1a1a',
  },
  
  // 内边距和间距
  padding: '16px 24px',
  borderBottom: '1px solid #f0f0f0',
  marginBottom: 8,
} as const;

/**
 * 内容区相关 Token
 */
const CONTENT_TOKENS = {
  // 背景颜色
  bg: '#ffffff',
  
  // 内边距
  padding: '12px 24px',
  bodyPadding: 24,
} as const;

/**
 * 底部相关 Token
 */
const FOOTER_TOKENS = {
  // 背景颜色
  bg: 'transparent',
  
  // 内边距和间距
  padding: '8px 16px',
  borderTop: '1px solid #f0f0f0',
  marginTop: 12,
} as const;

/**
 * 确认对话框相关 Token
 */
const CONFIRM_TOKENS = {
  // 内容内边距
  bodyPadding: '32px 32px 24px',
  
  // 图标右边距
  iconMarginInlineEnd: 16,
  
  // 按钮上边距
  btnsMarginTop: 24,
} as const;

/**
 * Modal 完整主题配置
 * 
 * 根据设计规范文件 Modal.json 定义的企业级对话框样式
 * 涵盖所有对话框区域的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Modal: modalThemeConfig } }}>
 *   <Modal title="基本对话框" open={true}>
 *     <p>对话框内容</p>
 *   </Modal>
 *   
 *   <Modal.confirm({
 *     title: '确认对话框',
 *     content: '确认要执行此操作吗？',
 *   });
 * </ConfigProvider>
 * ```
 */
export const modalThemeConfig: Partial<ComponentToken> = {
  // ========== 头部配置 ==========
  headerBg: HEADER_TOKENS.bg,
  titleFontSize: HEADER_TOKENS.title.fontSize,
  titleLineHeight: HEADER_TOKENS.title.lineHeight,
  titleColor: HEADER_TOKENS.title.color,
  
  // ========== 内容区配置 ==========
  contentBg: CONTENT_TOKENS.bg,
  
  // ========== 底部配置 ==========
  footerBg: FOOTER_TOKENS.bg,
};

/**
 * 获取 Modal 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myModalTheme = getModalTheme({
 *   headerBg: '#f5f5f5',              // 自定义头部背景色
 *   titleFontSize: 18,                // 自定义标题字体大小
 *   footerBg: '#fafafa',              // 自定义底部背景色
 * });
 * 
 * <ConfigProvider theme={{ components: { Modal: myModalTheme } }}>
 *   <Modal title="自定义对话框">自定义样式的对话框内容</Modal>
 * </ConfigProvider>
 * ```
 */
export const getModalTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...modalThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Modal 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as ModalComponentToken } from 'antd/es/modal/style';

